<!DOCTYPE html>
<!-- 属性选择器 -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Attribute selectors</title>

        <style type="text/css">

            /* type selector */
            input {  border: 1px solid blue ; }

            /* attribute selector : [attribute] 选择拥有指定属性名称的元素 ( 谁有 class 属性就选择谁 )*/
            [class] {
                border: 1px solid red ;
            }

            /* attribute selector : [attribute=value] 拥有指定属性 且 该属性值等于指定值 */
            [type=file] {
                background-color: yellow ;
            }

            /* attribute selector : [attribute~=value] 拥有指定属性 且 该属性值中包含指定值 */
            [class~=second] {
                background: green ;
            }

        </style>

    </head>
    <body>

        <fieldset class="first third" >
            <label for="username" class="second third fourth" >用户名</label>
            <input type="text" name="username" id="username" class="input-text second">
            <hr>
            <label for="passwd" >密码</label>
            <input type="password" name="passwd" id="passwd">
            <hr>
            <label for="confirm" >确认密码</label>
            <input type="password" name="confirm" id="confirm">
            <hr>
            <label for="headIcon" >上传头像</label>
            <input type="file" name="headIcon" id="headIcon">

        </fieldset>
        
    </body>
</html>